<!DOCTYPE html>
<html>
<head>
  <title>Popcorn JSON parser Plug-in Test</title>
  <link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
  <script src="../../test/qunit/qunit.js"></script>
  <!--
    do not move - this must be called immediately prior to
    popcorn-api-draft.js
  -->
  <script src="../../test/jquery.js"></script>

  <script src="../../popcorn.js"></script>
  <script src="../../modules/parser/popcorn.parser.js"></script>
  <script src="../../modules/timeline-sources/popcorn.timeline-sources.js"></script>
  <script src="../../plugins/webpage/popcorn.webpage.js"></script>
  <script src="../../plugins/footnote/popcorn.footnote.js"></script>
  <script src="../../plugins/googlemap/popcorn.googlemap.js"></script>
  <script src="../../parsers/parserJSON/popcorn.parserJSON.js"></script>
  <script src="../../parsers/parserJSON/popcorn.parserJSON.unit.js"></script>
  <script src="../../test/inject.js"></script>
  <script src="../../test/popcorn.inject.js"></script>
</head>
<body>
  <h1 id="qunit-header">Popcorn 0.3 JSON parser Plug-in Test</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <div id="qunit-fixture">  </div>

  <video id='video'
    controls
    width= '250px'
    poster="../../test/poster.png">

    <source id='mp4'
      src="../../test/trailer.mp4"
      type='video/mp4; codecs="avc1, mp4a"'>

    <source id='ogv'
      src="../../test/trailer.ogv"
      type='video/ogg; codecs="theora, vorbis"'>

    <source id='webm'
      src="../../test/trailer.webm"
      type='video/webm; codecs="vp8, vorbis"'>

    <p>Your user agent does not support the HTML5 Video element.</p>

  </video>

  <audio id='audio' data-timeline-sources="data/audio.json" controls>
    <source src="../../test/italia.mp4" type='audio/mp4; codecs="mp4a.40.2"'>
    <source src="../../test/italia.ogg" type='audio/ogg; codecs="vorbis"'>
	</audio>

  <style>
    .displays {
      width: 300px;
      height: 300px;
    }
  </style>
  <hr>
  <div style="width:300px;float:left">
		<div class="displays" id="video-iframe-container"></div>
		<div class="displays" id="video-map-container"></div>
		<div class="displays" id="video-footnote-container"></div>
	</div>
	<div style="width:300px;float:left">
		<div class="displays" id="audio-iframe-container"></div>
		<div class="displays" id="audio-map-container"></div>
		<div class="displays" id="audio-footnote-container"></div>
	</div>
</body>
</html>
